*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.clearfix::after{
	clear: both;
	display: table;
	content: "";
}
body{
	background: #CCCCCC;
}
header{
	height: 60px;
	width: 100%;
}
.h-left{
	width: 50%;
	color: #ccc;
	opacity: 0;
	transition: 5s;
	text-shadow: 2px 2px 2px #000;
	float: left;
	line-height: 60px;
	font-size: 54px;
	text-align: center;
}
.h-right{
	padding-top: 15px;
	padding-right: 20px;
	width: 50%;
	/*height: 60px;*/
	float: right;
}
.h-right > div{
	width: 30px;
	text-align: center;
	margin-right: 10px;
	float: right;
	height: 30px;
	font-size: 12px;
	border: 2px solid #999999;
}
a{
	opacity: 0;
	color: #ccc;
	transition: 5s;
	text-decoration: none;
}
.xc{
	opacity: 0;
	transition: .5s;
}
header:hover .xc{
	opacity: 1;
}
.class6{
	background: #ccc;
}
.class5{
	background: #fff;
}
.class4{
	background: #000;
}
.class3{
	background: blue;
}
.class2{
	background: green;
}
div{
	text-align: center;
}
.class1{
	background: red;
}
.cw{
	opacity: 0;
	box-shadow: 3px 3px 3px #000;
	margin-top: 20px;
	transition: 5s;
	background: #ccc;
	width: 100%;
	line-height: 50px;
	color: #ccc;
	text-align: center;
}
.jz{
	margin-top: 25px;
	text-align: center;
}
.xim{
	opacity: 0;
	transition: 5s;
}
